<template>
  <div class="project">
    <div class="year">
      <span>年份：</span>
      <div v-for="(item, index) in yearList" :key="index">
        <div
          class="year-item"
          :class="{
            active: currentYear === index
            // disabled:
            //   isView && yearList[index] > todayYear
          }"
          @click="clickYear(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="month">
      <span>月份：</span>
      <div
        v-for="(item, index) in monthList[currentYear]"
        :key="index + 'month'"
      >
        <div
          class="month-item"
          :class="{
            active: currentMonth === index
          }"
          @click="clickMonth(index)"
        >
          {{ item }}月
        </div>
      </div>
    </div>
    <div class="tip">
      <span class="tip-label">项目名称：</span>
      <span class="tip-val">{{ projectName }}</span>
      <span class="tip-label">项目总投资：</span>
      <span class="tip-val">{{ investment }} 万元</span>
      <span class="tip-label">本年度计划投资：</span>
      <span class="tip-val"
        >{{
          yearPlanInvestment[yearList[currentYear]] || 0
        }}
        万元</span
      >
    </div>
    <el-form
      :model="basicForm"
      label-position="top"
      :rules="basicRules"
      ref="basicFormRef"
    >
      <div
        v-for="(item, index) of basicForm.processItemInfos"
        :key="index"
        v-if="
          yearList[currentYear] == item.year &&
          monthList[currentYear][currentMonth] == item.month
        "
      >
        <!-- 月度进度信息 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            月度进度信息
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="报送联系人手机"
                  prop="phone"
                >
                  <el-input
                    v-model="item.phone"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="项目建设阶段"
                  prop="buildStage"
                >
                  <el-input
                    v-model="item.buildStage"
                    :disabled="isDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="本年度累计完成投资"
                  prop="yearTotalInvestment"
                >
                  <el-input
                    v-model="item.yearTotalInvestment"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="累计完成投资"
                  prop="totalInvestment"
                >
                  <el-input
                    v-model="item.totalInvestment"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="剩余投资"
                  prop="surplusInvestment"
                >
                  <el-input
                    v-model="item.surplusInvestment"
                    :disabled="isDetail"
                    ><template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="是否应入统计库"
                  prop="shouldTotal"
                >
                  <el-select
                    placeholder=""
                    v-model="item.shouldTotal"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="是否已入统计库"
                  prop="joinState"
                >
                  <el-select
                    placeholder=""
                    v-model="item.joinState"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="入库时间"
                  prop="joinTime"
                >
                  <el-date-picker
                    v-model="item.joinTime"
                    type="date"
                    :disabled="isDetail"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="工程形象进度"
                  prop="workProcess"
                >
                  <el-input
                    v-model="item.workProcess"
                    :disabled="isDetail"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item
                  label="进度照片(最多上传四张)"
                  prop="processImg"
                >
                  <UploadVue
                    class="file-upload"
                    v-model="item.imgList"
                    :disabled="isDetail"
                    :showFileList="false"
                    :showProgress="true"
                    :limit="4"
                  />
                  <div class="process-img">
                    <div
                      class="process-img-item"
                      v-for="(
                        img, imgIndex
                      ) of item.imgList"
                      :key="imgIndex"
                    >
                      <el-image
                        :src="
                          getImage(
                            img.attachmentId ||
                              img.response.data
                          )
                        "
                        :preview-src-list="
                          item.imgList.map((item) =>
                            getImage(
                              item.attachmentId ||
                                item.response.data
                            )
                          )
                        "
                      />
                      <i
                        class="el-icon-error"
                        @click="deleteImg(index, imgIndex)"
                        v-if="!isDetail"
                      ></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item
                  label="进度视频(最多上传2个)"
                  prop="processVideo"
                >
                  <UploadVue
                    class="file-upload"
                    v-model="item.videoList"
                    :disabled="isDetail"
                    :showFileList="false"
                    :showProgress="true"
                    :limit="2"
                  />
                  <div class="process-img">
                    <div
                      class="process-img-item"
                      v-for="(
                        video, videoIndex
                      ) of item.videoList"
                      :key="videoIndex"
                    >
                      <video
                        muted="muted"
                        :id="`video${index}${videoIndex}`"
                        class="video"
                        :src="
                          getImage(
                            video.attachmentId ||
                              video.response.data
                          )
                        "
                        :autoplay="false"
                        type="video/mp4"
                        poster="false.png"
                        controls="controls"
                        loop="-1"
                      >
                        <p>你的浏览器不支持video标签.</p>
                      </video>
                      <i
                        class="el-icon-error"
                        @click="
                          deleteVideo(index, videoIndex)
                        "
                        v-if="!isDetail"
                      ></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 改革创新亮点项目信息 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            改革创新亮点项目信息
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="申报改革创新亮点项目"
                  prop="declareProject"
                >
                  <el-select
                    placeholder=""
                    v-model="item.declareProject"
                    clearable
                    :disabled="isDetail"
                  >
                    <el-option
                      v-for="item in ynOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item label="类别" prop="type">
                  <el-select
                    placeholder=""
                    v-model="item.type"
                    clearable
                    :disabled="isDetail"
                    @change="
                      (val) => handleChangeType(val, index)
                    "
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :md="12" :lg="8" :xl="6">
                <el-form-item
                  label="佐证材料"
                  prop="fileName"
                >
                  <UploadVue
                    class="file-upload"
                    v-model="item.fileList"
                    :disabled="isDetail"
                    :showFileList="false"
                    :showProgress="true"
                    @uploadSuccess="
                      (val) =>
                        handleChangeFileList(val, index)
                    "
                  />
                  <el-input
                    placeholder="暂无文件"
                    v-model="item.fileName"
                    :disabled="isDetail"
                    clearable
                    @change="
                      (val) =>
                        handleChangeFileName(val, index)
                    "
                  ></el-input>
                </el-form-item>
              </el-col>
              <template v-if="item.type === 'tqkg'">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="具体创新点"
                    prop="innovationPoint"
                  >
                    <el-checkbox-group
                      v-model="item.innovationPoint"
                      :disabled="isDetail"
                      @change="
                        (val) =>
                          handleChangeInnovationPoint(
                            val,
                            index
                          )
                      "
                    >
                      <el-checkbox
                        v-for="item in innovationPointOptions"
                        :label="item"
                        :key="item"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                  v-if="
                    basicForm.processItemInfos[
                      index
                    ].innovationPoint.indexOf(
                      '创新解决前期存在问题'
                    ) !== -1 ||
                    basicForm.processItemInfos[
                      index
                    ].innovationPoint.indexOf('其他') !== -1
                  "
                >
                  <el-form-item
                    label="创新解决前期存在问题/其他"
                    prop="content"
                  >
                    <el-input
                      v-model="item.content"
                      :disabled="isDetail"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="item.type === 'dtkj'">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="具体创新点"
                    prop="innovationPoint"
                  >
                    <el-checkbox-group
                      v-model="item.innovationPoint"
                      :disabled="isDetail"
                      @change="
                        (val) =>
                          handleChangeInnovationPoint(
                            val,
                            index
                          )
                      "
                    >
                      <el-checkbox
                        v-for="item in innovationPointOptions1"
                        :label="item"
                        :key="item"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                  v-if="
                    basicForm.processItemInfos[
                      index
                    ].innovationPoint.indexOf(
                      '创新解决建设中存在问题'
                    ) !== -1 ||
                    basicForm.processItemInfos[
                      index
                    ].innovationPoint.indexOf('其他') !== -1
                  "
                >
                  <el-form-item
                    label="创新解决建设中存在问题/其他"
                    prop="content"
                  >
                    <el-input
                      v-model="item.content"
                      :disabled="isDetail"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </div>
        </div>
        <!-- 工作推进情况 -->
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            工作推进情况
          </div>
          <div class="project-part-content">
            <div
              v-for="(item, indexs) of item.workInfoMonths"
              :key="indexs"
            >
              <div class="project-part-content-title">
                {{ item.node }}
              </div>
              <el-row :gutter="24">
                <!-- 节点：开工 -->
                <template v-if="item.node === '开工'">
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否开工"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.startWork'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.startWork"
                        clearable
                        :disabled="isDetail"
                        @change="
                          handleChangeStartWork(
                            index,
                            indexs
                          )
                        "
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    v-if="item.startWork === '是'"
                  >
                    <el-form-item
                      label="实际开工时间"
                      :prop="
                        'planInfo.' +
                        index +
                        '.workInfos.' +
                        indexs +
                        '.realTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.realTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    v-else
                  >
                    <el-form-item
                      label="计划开工时间"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.startTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.startTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否存在问题"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.problem'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.problem"
                        :disabled="isDetail"
                        @change="
                          (value) =>
                            handleChangeProblem(
                              value,
                              index,
                              indexs
                            )
                        "
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
                <!-- 节点：非“开工”节点 -->
                <template v-else>
                  <!-- 所有情况都有：办理情况 -->
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="办理情况"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.status'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.status"
                        :disabled="isDetail"
                        @change="
                          (value) =>
                            handleChangeStatus(
                              value,
                              index,
                              indexs
                            )
                        "
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!-- 办理情况：未开始办理、办理中 时显示 -->
                  <template
                    v-if="
                      basicForm.processItemInfos[index]
                        .workInfoMonths[indexs].status ===
                        'wksbl' ||
                      basicForm.processItemInfos[index]
                        .workInfoMonths[indexs].status ===
                        'blz'
                    "
                  >
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="计划开始时间"
                        :prop="
                          'processItemInfos.' +
                          index +
                          '.workInfoMonths.' +
                          indexs +
                          '.startTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.startTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="预计完成时间"
                        :prop="
                          'processItemInfos.' +
                          index +
                          '.workInfoMonths.' +
                          indexs +
                          '.endTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.endTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="是否存在问题"
                        :prop="
                          'processItemInfos.' +
                          index +
                          '.workInfoMonths.' +
                          indexs +
                          '.problem'
                        "
                      >
                        <el-select
                          placeholder=""
                          v-model="item.problem"
                          :disabled="isDetail"
                          @change="
                            (value) =>
                              handleChangeProblem(
                                value,
                                index,
                                indexs
                              )
                          "
                        >
                          <el-option
                            v-for="item in ynOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </template>
                  <!-- 办理情况：已办结 时显示-->
                  <template
                    v-if="
                      basicForm.processItemInfos[index]
                        .workInfoMonths[indexs].status ===
                      'ybj'
                    "
                  >
                    <el-col
                      :sm="24"
                      :md="12"
                      :lg="8"
                      :xl="6"
                    >
                      <el-form-item
                        label="实际完成时间"
                        :prop="
                          'processItemInfos.' +
                          index +
                          '.workInfoMonths.' +
                          indexs +
                          '.completeTime'
                        "
                      >
                        <el-date-picker
                          v-model="item.completeTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd HH:mm:ss"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </template>
                </template>
                <!-- 是否存在问题：是 时显示-->
                <template
                  v-if="
                    basicForm.processItemInfos[index]
                      .workInfoMonths[indexs].problem ===
                    '是'
                  "
                >
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="问题描述"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.description'
                      "
                    >
                      <el-input
                        type="textarea"
                        v-model="item.description"
                        :disabled="isDetail"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="解决措施"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.completeWay'
                      "
                    >
                      <el-input
                        type="textarea"
                        v-model="item.completeWay"
                        :disabled="isDetail"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="预计解决时间"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.planTime'
                      "
                    >
                      <el-date-picker
                        v-model="item.planTime"
                        type="date"
                        :disabled="isDetail"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="24" :md="12" :lg="8" :xl="6">
                    <el-form-item
                      label="是否需要协调处理"
                      :prop="
                        'processItemInfos.' +
                        index +
                        '.workInfoMonths.' +
                        indexs +
                        '.needHandle'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.needHandle"
                        clearable
                        :disabled="isDetail"
                      >
                        <el-option
                          v-for="item in ynOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDictOptions } from '@/utils/dict'
import UploadVue from '@/components/upload'
import { securityFileUrl } from '@/api/wisdomBuild'

export default {
  props: {
    yearList: Array,
    monthList: Array,
    isDetail: Boolean,
    detailInfo: Array,
    projectName: String,
    investment: [String, Number],
    yearPlanInvestment: Object
  },
  components: {
    UploadVue
  },
  data() {
    return {
      currentYear: 0,
      currentMonth: 0,
      basicForm: {
        processItemInfos: []
      },
      basicRules: {
        useArea: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ],
        day: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ]
      },
      statusOptions: [],
      ynOptions: [
        {
          dictValue: '是',
          dictText: '是'
        },
        {
          dictValue: '否',
          dictText: '否'
        }
      ],
      innovationPointOptions: [
        '拿地即开工',
        '质安监提前介入',
        '容缺办理',
        '创新解决前期存在问题',
        '其他'
      ],
      innovationPointOptions1: [
        '完工即验收',
        '验收即投用',
        '创新解决建设中存在问题',
        '其他'
      ],
      typeOptions: []
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    this.initOptions()
  },
  watch: {
    monthList(val) {
      if (val.length && this.yearList.length) {
        if (this.detailInfo.length === 0) {
          let index = 0
          const arr = []
          val.map((year) => {
            year.map((item) => {
              arr.push({
                innovationPoint: [],
                type: '',
                content: '',
                year: this.yearList[index],
                month: item,
                phone: '',
                buildStage: '',
                yearTotalInvestment: '',
                totalInvestment: '',
                surplusInvestment: '',
                shouldTotal: '',
                joinState: '',
                joinTime: '',
                workProcess: '',
                declareProject: '',
                imgPkid: '',
                fileName: '',
                fileId: '',
                fileList: [],
                imgList: [],
                videoList: [],
                workInfoMonths: [
                  {
                    node: '开工',
                    status: '',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 1
                  },
                  {
                    node: '可研评审',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 2
                  },
                  {
                    node: '立项',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 3
                  },
                  {
                    node: '土地保障批复',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 4
                  },
                  {
                    node: '拆迁',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 5
                  },
                  {
                    node: '签订出让合同',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 6
                  },
                  {
                    node: '方案设计（规划评审）',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 7
                  },
                  {
                    node: '施工图设计即审查',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 8
                  },
                  {
                    node: '清单编制及评审',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 9
                  },
                  {
                    node: '取得控制性批复并发布招标公告',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 10
                  },
                  {
                    node: '评标结果公示',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 11
                  },
                  {
                    node: '施工进场准备',
                    status: 'wksbl',
                    startWork: '',
                    realTime: '',
                    startTime: '',
                    endTime: '',
                    problem: '否',
                    completeTime: '',
                    description: '',
                    completeWay: '',
                    planTime: '',
                    needHandle: '',
                    orderIndex: 12
                  }
                ]
              })
            })
            index += 1
          })

          this.basicForm.processItemInfos = arr
        } else {
          const oldInfo = JSON.parse(
            JSON.stringify(this.basicForm.processItemInfos)
          )
          this.basicForm.processItemInfos = []
          let index = 0
          val.forEach((year) => {
            year.forEach((item) => {
              const oldVal = oldInfo.find(
                (info) =>
                  info.year ===
                    parseInt(this.yearList[index]) &&
                  info.month === parseInt(item)
              )
              const oldVal1 = this.detailInfo.find(
                (info) =>
                  info.year ===
                    parseInt(this.yearList[index]) &&
                  info.month === parseInt(item)
              )
              if (oldVal) {
                this.basicForm.processItemInfos.push(oldVal)
              } else if (oldVal1) {
                this.basicForm.processItemInfos.push(
                  oldVal1
                )
              } else {
                this.basicForm.processItemInfos.push({
                  innovationPoint: [],
                  type: '',
                  content: '',
                  year: this.yearList[index],
                  month: item,
                  phone: '',
                  buildStage: '',
                  yearTotalInvestment: '',
                  totalInvestment: '',
                  surplusInvestment: '',
                  shouldTotal: '',
                  joinState: '',
                  joinTime: '',
                  workProcess: '',
                  declareProject: '',
                  imgPkid: '',
                  fileName: '',
                  fileId: '',
                  fileList: [],
                  imgList: [],
                  videoList: [],
                  workInfoMonths: [
                    {
                      node: '开工',
                      status: '',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 1
                    },
                    {
                      node: '可研评审',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 2
                    },
                    {
                      node: '立项',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 3
                    },
                    {
                      node: '土地保障批复',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 4
                    },
                    {
                      node: '拆迁',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 5
                    },
                    {
                      node: '签订出让合同',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 6
                    },
                    {
                      node: '方案设计（规划评审）',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 7
                    },
                    {
                      node: '施工图设计即审查',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 8
                    },
                    {
                      node: '清单编制及评审',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 9
                    },
                    {
                      node: '取得控制性批复并发布招标公告',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 10
                    },
                    {
                      node: '评标结果公示',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 11
                    },
                    {
                      node: '施工进场准备',
                      status: 'wksbl',
                      startWork: '',
                      realTime: '',
                      startTime: '',
                      endTime: '',
                      problem: '否',
                      completeTime: '',
                      description: '',
                      completeWay: '',
                      planTime: '',
                      needHandle: '',
                      orderIndex: 12
                    }
                  ]
                })
              }
            })
            index += 1
          })
        }
      }
    },
    detailInfo(val) {
      // if (val.length > 0) {
      this.basicForm.processItemInfos = Object.assign(
        [],
        this.detailInfo
      )
      // }
    }
  },
  methods: {
    clickYear(index) {
      // if (
      //   this.isView &&
      //   this.yearList[index] > this.todayYear
      // ) {
      //   this.$message.warning('不可查看未到年份')
      //   return
      // }
      this.currentYear = index
      this.currentMonth = 0
    },
    clickMonth(index) {
      this.currentMonth = index
    },
    async initOptions() {
      const data = await getDictOptions(
        'zhcy_blqk,zhcy_cylb'
      )
      this.statusOptions = data.filter(
        (i) => i.dictCode === 'zhcy_blqk'
      )[0].resourceDictItems
      this.typeOptions = data.filter(
        (i) => i.dictCode === 'zhcy_cylb'
      )[0].resourceDictItems
    },
    // 修改办理情况
    handleChangeStatus(value, index, indexs) {
      // 办理情况：未开始办理、办理中 => 重置：实际完成时间
      if (value === 'wksbl' || value === 'blz') {
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].completeTime = ''
      } else {
        // 办理情况：已办结、无需办理 => 重置：计划开始时间、预计完成时间、是否存在问题、问题描述、解决措施、预计完成时间、是否需要协调处理
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].startTime = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].endTime = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].problem = '否'
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].description = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].completeWay = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].planTime = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].needHandle = ''
        // 办理情况：无需办理 => 重置：实际完成时间
        if (value === 'wxbl') {
          this.basicForm.processItemInfos[
            index
          ].workInfoMonths[indexs].completeTime = ''
        }
      }
    },
    // 修改是否存在问题
    handleChangeProblem(value, index, indexs) {
      if (value === '否') {
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].description = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].completeWay = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].planTime = ''
        this.basicForm.processItemInfos[
          index
        ].workInfoMonths[indexs].needHandle = ''
      }
    },
    // 修改是否开工
    handleChangeStartWork(index, indexs) {
      this.basicForm.processItemInfos[index].workInfos[
        indexs
      ].startTime = ''
      this.basicForm.processItemInfos[index].workInfos[
        indexs
      ].realTime = ''
    },
    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },
    // 修改佐证材料
    handleChangeFileList(val, index) {
      if (val && val.length > 0) {
        this.basicForm.processItemInfos[index].fileId =
          val[val.length - 1].response.data
        this.basicForm.processItemInfos[index].fileName =
          val[val.length - 1].name
      }
    },
    // 清除佐证材料
    handleChangeFileName(value, index) {
      if (!value) {
        this.basicForm.processItemInfos[index].fileId = ''
        this.basicForm.processItemInfos[index].imgPkid = ''
        this.basicForm.processItemInfos[index].fileList = []
      }
    },
    // 删除进度照片
    deleteImg(index, imgIndex) {
      this.basicForm.processItemInfos[index].imgList.splice(
        imgIndex,
        1
      )
    },
    // 删除进度视频
    deleteVideo(index, videoIndex) {
      this.basicForm.processItemInfos[
        index
      ].videoList.splice(videoIndex, 1)
    },
    // 修改类别：修改类别重置具体创新点、补充信息
    handleChangeType(val, index) {
      this.basicForm.processItemInfos[
        index
      ].innovationPoint = []
      this.basicForm.processItemInfos[index].content = ''
    },
    // 修改具体创新点：没有勾选：创新解决前期存在问题、创新解决建设中存在问题、其他，重置补充内容
    handleChangeInnovationPoint(val, index) {
      if (
        this.basicForm.processItemInfos[
          index
        ].innovationPoint.indexOf(
          '创新解决前期存在问题'
        ) !== -1 ||
        this.basicForm.processItemInfos[
          index
        ].innovationPoint.indexOf(
          '创新解决建设中存在问题'
        ) !== -1 ||
        this.basicForm.processItemInfos[
          index
        ].innovationPoint.indexOf('其他') !== -1
      ) {
        this.basicForm.processItemInfos[index].content = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.project {
  flex: 1 1 auto;
  overflow: auto;

  &-part {
    margin-top: 10px;

    &-title {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 24px;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 11px;
      line-height: 16px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &-title1 {
      margin-left: 10px;
    }

    &-content {
      padding-left: 10px;
      &-title {
        font-size: 16px;
        font-weight: 500;
        color: #4c565c;
        line-height: 16px;
        position: relative;
        padding-left: 15px;
        margin-bottom: 16px;
        &::before {
          position: absolute;
          content: ' ';
          width: 7px;
          height: 7px;
          background: #87ebf7;
          border-radius: 50%;
          top: 5px;
          left: 0;
        }
      }
    }
  }
}

::v-deep {
  .file-upload {
    .el-upload {
      position: absolute;
      left: 240px;
      top: -35px;
    }
  }
  .el-form-item__label {
    line-height: 14px !important;
  }

  .el-form-item__content {
    line-height: auto !important;
  }

  .el-input-group__append {
    height: 24px !important;
    border-left: 1px solid #dcdfe6 !important;
    text-align: center !important;
    line-height: 24px !important;
  }

  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 20px;
    line-height: 20px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }

    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }

      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    width: 320px !important;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }

  .el-date-editor.el-input {
    width: auto !important;
  }
}
.year,
.month {
  display: flex;
  margin: 0 0 20px 10px;
  font-size: 14px;
  line-height: 28px;

  &-item {
    width: 66px;
    height: 28px;
    background: #f6f9fc;
    border: 1px solid #ebf1f8;
    margin-right: 15px;
    text-align: center;
    cursor: pointer;
    line-height: 28px;
    font-size: 14px;

    &.active {
      color: #00baff;
      border: 1px solid #00baff;
    }
    &.disabled {
      background: #e8eff7;
      color: #000000ba;
    }
  }
}

.process-img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 200px;
    height: 140px;
    position: relative;
    margin-right: 10px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .el-icon-error {
      position: absolute;
      right: 0;
      top: 0;
      color: red;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
.tip {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px;
  background-color: #f1f1f1;
  margin-bottom: 10px;
  &-label {
    color: #000000;
    font-size: 14px;
  }
  &-val {
    color: #4c565c;
    font-size: 14px;
    margin-right: 20px;
  }
}
</style>
